﻿<html>
<head>
	<title>选项卡演示</title>
	
	<style type="text/css">    
		body
		{
			margin:0px;
			padding:0px;
			font-size:16px;
			font-family:verdana,sans-serif;
			text-align:center;
			background-color:#E4E4E4;
		}	
		#tab
		{
			width:400px;
			height:200px;
			border:1px solid #80BDCB;
		}
		#top
		{
			margin:5px 5px 0px 5px;
			width:398px;
			background-color:#CCE8CF;
		}
		ul
		{
			margin:0px;
			padding:0px;
			list-style:none;
		}
		#top ul li,#top ul li a
		{
			margin:0px;
			padding:0px;
			float:left;
		}
		#top .title
		{
			 margin-left:2px;
			 width:95px;
			 height:30px;
			 line-height:30px;
			 text-align:center;
			 font-weight:bold;
		}  
		#nav
		{
			clear:both; 
		}  
 
		#bottom
		{ 
			width:380px; 
			height:170px; 
			margin:0px 5px 0px 5px; 
			overflow:hidden; 
			border:1px solid black; 
			background-color:white; 
			border-top:0px; 
		} 
		#top a:link,a:visited
		{ 
			width:100%; 
			height:100%; 
			color:black; 
			text-decoration:none; 
			border:1px solid black; 
		}  
		#top a:hover,a:active
		{ 
			width:100%; 
			height:100%; 
			background-color:#999999; 
			border-color:#fff; 
			border:1px solid black; 
			border-bottom:0px; 
		}  
	</style>
	<script type="text/javascript">
		function show(src, des)
		{
			for (i = 1; i < 5; i++)
			{
				if (des == i)
				{
					document.getElementById("ondiv" + i).style.display = "block";
					document.getElementById("tab" + i).style.backgroundColor = "#fff";
					document.getElementById("tab" + i).firstChild.style.borderBottom = "0px";
				}
				else
				{
					document.getElementById("ondiv" + i).style.display = "none";
					document.getElementById("tab" + i).style.backgroundColor = "";
					document.getElementById("tab" + i).firstChild.style.borderBottom = "";
				}
			}
		}
	</script>
</head>
<body>
	<div id="tab">
		<div id="top">
			<ul>
				<li id="tab1" class="title" onclick="show(this,'1')"><a href="#">选项 卡一 </a></li>
				<li id="tab2" class="title" onclick="show(this,'2')"><a href="#">选项 卡二 </a></li>
				<li id="tab3" class="title" onclick="show(this,'3')"><a href="#">选项 卡三 </a></li>
				<li id="tab4" class="title" onclick="show(this,'4')"><a href="#">选项 卡四 </a></li>
			</ul>
		</div>
		<div id="nav">
		</div>
		<div id="bottom">
			<div id="ondiv1" class="content" style="display: block">
				<div>
					123
				</div>
			</div>
			<div id="ondiv2" class="content" style="display: none">
				内容二
			</div>
			<div id="ondiv3" class="content" style="display: none">
				内容三
			</div>
			<div id="ondiv4" class="content" style="display: none">
				内容四
			</div>
		</div>
	</div>
</body>
</html>
